import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { Icon, Modal, Toast } from 'antd-mobile'
import { FooterTab } from '../footer'
import { myFetch, helper } from '../utils'

const { alert } = Modal

export default class AccountPage extends Component {
  constructor() {
    super()
    this.fetchAccountRes = this.fetchAccountRes.bind(this)
    this.logout = this.logout.bind(this)
    this.state = {
      accountInfo: {},
    }
  }
  componentDidMount() {
    this.fetchAccountRes()
  }
  render() {
    const { accountInfo } = this.state
    const { customerId } = localStorage
    let balance = 0
    let coupon = 0
    if (accountInfo.Balance) {
      balance = accountInfo.Balance
    }
    if (accountInfo.Coupon) {
      coupon = accountInfo.Coupon
    }
    const phoneNumber = customerId ? customerId : '***********'
    return (
      <div className={`rt-account-page-container cm-column-flex-box`}>
        <header>
          <div>
            <span>帐户名称：{phoneNumber}</span>
            <img alt="auth?" src={require('static/images/authed.png')} />
          </div>
          <Icon type="right" />
        </header>

        <section>
          <div className={`rt-text-box`}>
            <span>账户余额（元）</span>
            <span>赠券余额：</span>
          </div>

          <div className={`rt-text-box`}>
            <span className={`-bold`}>{balance.toFixed(2)}</span>
            <span className={`rt-coupon-balance`}>{coupon.toFixed(2)}元</span>
          </div>

          <div className={`rt-btn-group`}>
            <div className={`-recharge`}>
              <Icon type="question" />
              <span>充值</span>
            </div>

            <div
              className={`-withdraw`}
              onClick={() => {
                hashHistory.push('/withdraw')
              }}
            >
              <Icon type="question" />
              <span>提现</span>
            </div>
          </div>
        </section>

        <div className={`cm-scrollable-container`}>
          <div
            className={`cm-row-item`}
            onClick={() => {
              hashHistory.push('/positions')
            }}
          >
            <div className={`-left`}>
              <Icon type="question" />
              <span>持仓明细</span>
            </div>
            <div className={`-right`}>
              <Icon type="right" />
            </div>
          </div>
          <div
            className={`cm-row-item`}
            onClick={() => {
              hashHistory.push('/transactions')
            }}
          >
            <div className={`-left`}>
              <Icon type="question" />
              <span>历史交易</span>
            </div>
            <div className={`-right`}>
              <Icon type="right" />
            </div>
          </div>
          <div
            className={`cm-row-item`}
            onClick={() => {
              hashHistory.push('/in-out')
            }}
          >
            <div className={`-left`}>
              <Icon type="question" />
              <span>收支明细</span>
            </div>
            <div className={`-right`}>
              <Icon type="right" />
            </div>
          </div>
          <div
            className={`cm-row-item`}
            onClick={() => {
              hashHistory.push('/gift-coupon')
            }}
          >
            <div className={`-left`}>
              <Icon type="question" />
              <span>赠券</span>
            </div>
            <div className={`-right`}>
              <Icon type="right" />
            </div>
          </div>
          <div
            className={`cm-row-item`}
            onClick={() => {
              hashHistory.push('/exp-ticket')
            }}
          >
            <div className={`-left`}>
              <Icon type="question" />
              <span>体验券</span>
            </div>
            <div className={`-right`}>
              <span className={`-text`}>4张可领</span>
              <Icon type="right" />
            </div>
          </div>
          <div
            className={`cm-row-item`}
            onClick={() => {
              hashHistory.push('/bankcard-list')
            }}
          >
            <div className={`-left`}>
              <Icon type="question" />
              <span>银行卡</span>
            </div>
            <div className={`-right`}>
              <Icon type="right" />
            </div>
          </div>
          <div className={`cm-row-item -margin-top`}>
            <div className={`-left`}>
              <Icon type="question" />
              <span>安全设置</span>
            </div>
            <div className={`-right`}>
              <Icon type="right" />
            </div>
          </div>
          <div className={`cm-row-item`}>
            <div className={`-left`}>
              <Icon type="question" />
              <span>通知公告</span>
            </div>
            <div className={`-right`}>
              <Icon type="right" />
            </div>
          </div>
          <div
            className={`cm-row-item`}
            onClick={() => {
              alert('注销账号', <p>确定注销当前账号吗???</p>, [
                { text: '取消', onPress: () => console.log('cancel') },
                { text: '确定', onPress: () => this.logout() },
              ])
            }}
          >
            <div className={`-left`}>
              <Icon type="question" />
              <span>账户切换</span>
            </div>
            <div className={`-right`}>
              <Icon type="right" />
            </div>
          </div>
        </div>

        <FooterTab defaultIndex={2} />
      </div>
    )
  }
  fetchAccountRes() {
    const body = JSON.stringify({
      ...helper.accessEntry(),
    })
    myFetch(`/customers/account/get`, {body})
      .then(rs => {
        if (rs) {
          this.setState({accountInfo: rs})
        }
      })
  }
  logout() {
    const body = JSON.stringify({
      ...helper.accessEntry(),
    })
    helper.loadingToast()
    myFetch(`/customers/account/logout`, {body})
      .then(rs => {
        if (rs) {
          Toast.hide()
          Toast.success('注销登录成功', () => {
            hashHistory.push('/')
          })
        }
      })
  }
}